<template>
	<view class="container">
		<view class="close-btn" @click="closePage">
			<uni-icons type="closeempty" size="25" color="#666"></uni-icons>
		</view>
		
		<uni-calendar class="uni-calendar--hook" :showMonth="false">
		</uni-calendar>
		<view class="month-emotion">
			<view class="title">{{ $t('calendar.monthEmotionTitle') }}</view>
			<view class="emotion-box flex-just-between">
				<view class="e-item" v-for="(item, index) in emotionData" :key="index">
					<l-circle v-model:current="modelVale" :percent="item.percent" :dashboard="true" strokeWidth="12" trailWidth="12" :trail-color="'#F0F5F3'" 
					:strokeColor="item.color" :size="'170rpx'">
					    <image class="face-img" :src="item.icon"></image>
					</l-circle>
					<view class="percent-num">{{ item.percent }}%</view>
					<view>{{ $t(`calendar.emotionTypes.${item.typeKey}`) }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LCircle from '@/uni_modules/lime-circle/components/l-circle/l-circle.vue';
	export default {
		components:{
			LCircle
		},
		data() {
			return {
				show: true,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: [],
				},
				emotionData: [
					{
						typeKey: 'confused',
						percent: 42,
						color: '#9D8CBD',
						icon: '/static/confused.png'
					},
					{
						typeKey: 'calm',
						percent: 16,
						color: '#7DC163',
						icon: '/static/calm.png'
					},
					{
						typeKey: 'happy',
						percent: 12,
						color: '#EFBE19',
						icon: '/static/happy.png'
					}
				]
			}
		},
		onReady() {},
		methods: {
			closePage() {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: url('/static/calendar-bg.png') bottom center no-repeat #e4ebf0;
		background-size: 100%;
		padding-top: 24rpx;
		.close-btn{
			position: absolute;
			top: 48rpx;
			left: 48rpx;
			z-index: 8;
		}

		/deep/ .uni-calendar__content {
			background-color: transparent;
			.uni-calendar__header, .uni-calendar__weeks-day{
				border-bottom-color: transparent;
			}
			.uni-calendar__backtoday{
				display: none;
			}
			.uni-calendar__weeks-day{
				background-color:transparent;
			}
			.uni-calendar__header-btn-box{
				margin: 0 24rpx;
				width: 64rpx;
				height: 64rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
		}

		/* 情绪列表布局 */
		.month-emotion{
			padding-top: 30rpx;
			height: 440rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}
		.emotion-box{
			padding: 0 70rpx;
			text-align: center;
			font-size: 24rpx;
			.face-img{
				width: 66rpx;
				height: 66rpx;
			}
			.percent-num{
				margin: -50rpx 0 14rpx;
				font-size: 28rpx;
				color: #52A5F3;
			}
		}
	}
</style>